<?php
defined('_JEXEC') or die('Restricted access');
$app = JFactory::getApplication();
$input = $app->input;
$itemid = $input->get('Itemid');
?>

<link rel="stylesheet" href="/templates/ppspconsole/css/jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>
  <script type="text/javascript" src="/templates/ppspconsole/js/jquery-jvectormap-2.0.3.min.js"></script>
  <script type="text/javascript" src="/templates/ppspconsole/js/jquery-jvectormap-in-mill.js"></script>
<!-- <script type="text/javascript" src="/templates/ppspconsole/js/jquery-jvectormap-europe-merc.js"></script> -->
<div class="res-title-rg">
	<span class="fl pos-icon text-c"><i class="overview"></i></span>
	<div class="title-info">
		<h2 class="fontsize20">Overview</h2>
		<p><a href="#">Home</a>&nbsp;/&nbsp;Overview</p>
	</div>
</div>
<div class="ws-content2">
	<div class="container-fluid">
		<div class="row tymgbt">
			<div class="col-sm-4">
				<div class="bgwhite bore0 pd-tp-bt pd-lf-rg pos_pre over-hg1">
					<i class="overview-sp over-sp1"></i>
					<h3 class="fontnomal fontsize13">New Users of This Month</h3>
					<div class="fontsize30 ftbold sp-num" id="newUserCount" data-url="/index.php?option=com_console&task=overviewAjaxSuffix&suffix=nutm">--</div>
					<!-- <div class="col6"><span class="bglan colwhite">+17%</span>from previous period</div> -->
				</div>
			</div>
			<div class="col-sm-4">
				<div class="bgwhite bore0 pd-tp-bt pd-lf-rg pos_pre over-hg1">
					<i class="overview-sp over-sp2"></i>
					<h3 class="fontnomal fontsize13">Active Users of This Month</h3>
					<div class="fontsize30 ftbold sp-num" id="activeUsersCount" data-url="/index.php?option=com_console&task=overviewAjaxSuffix&suffix=autm">--</div>
					<!-- <div class="col6"><span class="bgh colwhite">+12%</span>from previous period</div> -->
				</div>
			</div>
			<div class="col-sm-4">
				<div class="bgwhite bore0 pd-tp-bt pd-lf-rg pos_pre over-hg1">
					<i class="overview-sp over-sp3"></i>
					<h3 class="fontnomal fontsize13">Revenue of This Month</h3>
					<div class="fontsize30 ftbold sp-num" id="RevenueCount"  data-url="/index.php?option=com_console&task=overviewAjaxSuffix&suffix=rtm">--</div>
					<!-- <div class="col6"><span class="bglj"></span>340</div> -->
				</div>
			</div>
		</div>
		<div class="bore0 bgwhite tymgbt">
			<div class="acquisition pdall15 other-mg">
				<h2 class="fontsize20">Acquisition</h2>
				<div class="" id="Acquisition" data-url="/index.php?option=com_console&task=dnucOverview" style="height:400px;">--</div>
			</div>

			<div class="row pdall15">
				<div class="col-sm-3">
					<div class="bge bore0 pd-tp-bt over-hg1">
						<div class="acq-items-list fl"><p>Impression</p><div class="fontsize30 ftbold sp-num" id="niCount" data-url="/index.php?option=com_console&task=overviewAjaxSuffix&suffix=ni">--</div></div>
						<div class="acq-items-list fl bor0"><p>Clicks</p><div class="fontsize30 ftbold sp-num" id="ncCount" data-url="/index.php?option=com_console&task=overviewAjaxSuffix&suffix=nc">--</div></div>
						<div class="acq-items-ft text-c">Touch Points</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="bge bore0 pd-tp-bt over-hg1">
						<div class="acq-items-list fl"><p>Organic</p><div class="fontsize30 ftbold sp-num"  id="noiCount" data-url="/index.php?option=com_console&task=overviewAjaxSuffix&suffix=noi">--</div></div>
						<div class="acq-items-list fl bor0"><p>Non-Organic</p><div class="fontsize30 ftbold sp-num"  id="nnoiCount" data-url="/index.php?option=com_console&task=overviewAjaxSuffix&suffix=nnoi">--</div></div>
						<div class="acq-items-ft text-c">Installs</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="bge bore0 pd-tp-bt over-hg1">
						<div class="acq-items-list bor0"><p>Installs / Clicks</p><div class="fontsize30 ftbold sp-num" id="ivsc">--</div></div>
						<div class="acq-items-ft text-c">Conversion Rate</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="bge bore0 pd-tp-bt over-hg1">
						<div class="acq-items-list bor0"><p>Cost</p><div class="fontsize30 ftbold sp-num" id="costCount"  data-url="/index.php?option=com_console&task=overviewAjaxSuffix&suffix=cost">--</div></div>
						<div class="acq-items-ft text-c">Cost</div>
					</div>
				</div>
			</div>

			<div class="row pdall15">
				<div class="col-sm-6">
					<div class="" id="nupc" data-url="/index.php?option=com_console&task=overviewAjaxSuffix&suffix=nupc" style="height:400px;">
						--...
					</div>
				</div>
				<div class="col-sm-6">
					<div class=""  id="odrt" data-url="/index.php?option=com_console&task=overviewAjaxSuffix&suffix=odrt" style="height:400px;">
						--...
					</div>
				</div>
			</div>

			<div class="row pdall15">
				<div class="col-sm-12">
					<div id="nups" class="fl" style="width:70%; height: 600px"></div>
					<table class="table_data_map fontsize14" id="map_data" border="0" cellpadding="0" cellspacing="0" style="width:226px; float:right;">
						<thead>
						  <tr role="head">
						    <td colspan="2" class="header">Top 5 Cities</td>
						  </tr>
						</thead>
						<tbody id="nupcity" data-url="/index.php?option=com_console&task=overviewAjaxSuffix&suffix=nupcity">

						</tbody>
					</table>
				</div>
			</div>
		</div>

		<div class="bore0 bgwhite tymgbt">
			<div class="acquisition pdall15 other-mg">
				<h2 class="fontsize20">Audience</h2>
				<div class="" id="Audience" data-url="/index.php?option=com_console&task=OverviewAudience" style="height: 400px;">--</div>
			</div>

			<div class="row pdall15">
				<div class="col-sm-4">
					<div class="" id="aupc" data-url="/index.php?option=com_console&task=aupcOverview" style="height: 400px">
						--
					</div>
				</div>
				<div class="col-sm-4">
					<div class="" id="aupcity" data-url="/index.php?option=com_console&task=aupcityOverview" style="height: 400px">
						--
					</div>
				</div>
				<div class="col-sm-4">
					<div class="" id="aupb" data-url="/index.php?option=com_console&task=aupbOverview" style="height: 400px">
						--
					</div>
				</div>
			</div>
		</div>

		<div class="bore0 bgwhite tymgbt">
			<div class="acquisition pdall15 other-mg">
				<h2 class="fontsize20">Revenue</h2>
				<div class="" id="drevenue" data-url="/index.php?option=com_console&task=OverviewRevenue" style="height: 400px"></div>
			</div>
		</div>

	</div>
</div>
<script type="text/javascript" src="/templates/ppspconsole/js/jquery.ajax-retry.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var installs = 0, clicks = 0, func_idx = 0;
	var mapChart;

	var executions = [
	    function() {
	        mapChart = createMap({
	            divId: "nups"
	        });
	    },
	    function() {
	        $.getJSON("/index.php?option=com_console&task=jsonOverview", function(data) {
	            $("#newUserCount").text(data.nutm.count);
				$("#activeUsersCount").text(data.autm.count);
				$("#RevenueCount").text("₹" + data.rtm.count);
				$("#niCount").text(data.ni.count);
	            $("#ncCount").text(data.nc.count);
				clicks = data.nc.count;
	            $("#noiCount").text(data.noi.count);
				$("#nnoiCount").text(data.nnoi.count);
				installs = data.noi.count + data.nnoi.count;
	            var p = 0;
	            if (clicks > 0)
	                p = Math.round((installs * 100) / clicks);
	            $("#ivsc").text(p + "%");
				$("#costCount").text("₹" + data.cost.count);
				createPieChartFromIE("nupc", "NU per Channel", data.nupc);
				updateMap(mapChart, {
	                data: data.nupcity
	            });
	            updateTop5Cities(data.nupcity);
				createLineChartFromIE("odrt", "1 Day Returning Trend", "Date",
	                "Percentage", data.odrt);
				updateStackedBarChart("Acquisition", data.dnuc, "Daily New Users Trend");
				updateAudienceOverview("Audience", data.ao);
				createPieChartFromIE("aupc", "AU per Channel", data.aupc);
				createPieChartFromIE("aupcity", "AU per City", data.aupcity);
				createPieChartFromIE("aupb", "AU per Brand", data.aupb);
				createLineChartFromIE("drevenue", "Daily Revenue Trend", "Date",
	                "INR", data.drevenue);
				$("#ajax-loading").hide();
	        })
	        .error(function() {
	            console.log("update overview failed");
				$("#ajax-loading").hide();
	        })
	        .retry({times:3});
	    }
	];

	function delay_exec() {
	    if (func_idx < executions.length) {
	        executions[func_idx]();
	        func_idx++;
	        setTimeout(delay_exec, 200);
	    }
	}

	function updateTop5Cities(data) {
	    if (data.data.length == 0)
	        return ;
	    var html = "";
	    var count = data.data.length;
	    if (count > 5)
	        count = 5;
	    for (var i = 0; i < count; i++) {
	        html += "<tr map_num='CN-11'><td>"
	            + (data.data[i].city == null ? "unknow" : data.data[i].city)
	            + "</td><td>" + data.data[i].count + "</td></tr>";
	    }
	    $('#nupcity').html(html);
	}

	function updateStackedBarChart(divId, data, title) {
	    var chart = createStackedBarChart({
	        divId: divId,
	        data: data,
	        title: title
	    });
	}

	function updateAudienceOverview(divId, data) {
	    var chart = createDoubleLineChart({
	        divId: divId,
	        title: 'Daily Active Users Trend',
	        isHourView: false,
	        xitems: data.times,
	        yitems1: data.series[0].value,
	        yitems2: data.series[1].value,
	        xTitle: '',
	        yTitle: ''
	    });
	}

	$("#ajax-loading").show();
	delay_exec();
});

/*
function updateAupcPieChart(divId, url) {
	url = url +'&scale=day';
	$.getJSON(url, function (rpt) {
		var names = [];
		var items = [];
		var i;
		if (rpt == null) {
			$('#'+divId).html('no data');
		}
		if (rpt.data.length > 0) {
			for (i = 0; i < rpt.data.length; i++) {
				var d = rpt.data[i];
				names.push(d.name);
				items.push({
					"name": d.name,
					"value": d.value
				});
			}
		}else {
			$('#'+divId).html('no data');
		}

		var chart = createPieChart({
			divId: divId,
			title: '',
			names: names,
			values: items
		});
		chart.hideloading();
		chart.setOption({
			option: {
				title: {
					show: false
				}
			}
		});
	}).retry({times:3});
}

function updateAudienceOverview(divId, data) {
    var chart = createDoubleLineChart({
        divId: divId,
        title: 'Daily Active Users Trend',
        isHourView: false,
        xitems: data.times,
        yitems1: data.series[0].value,
        yitems2: data.series[1].value,
        xTitle: '',
        yTitle: ''
    });
}

function updateAudienceChart(divId, url) {
	url = url +'&scale=day';
	$.getJSON(url, function (data) {
		if(divId=="Audience"){
			var chart = createDoubleLineChart({
				divId: divId,
				title: '',
				isHourView: false,
				xitems: data.times,
				yitems1: data.series[0].value,
				yitems2: data.series[1].value,
				xTitle: '',
				yTitle: ''
			});
		}
		if(divId=="RevenueLineChart"){
			var chart = createRevenueLineChart({
				divId: divId,
				title: '',
				isHourView: false,
				xitems: data.times,
				yitems1: data.series[0].value,
				yitems2: data.series[1].value,
				xTitle: '',
				yTitle: ''
			});
		}
		chart.setOption({
			option: {
				title: {
					show: false
				}
			}
		});
	}).retry({times:3});
}

function updateNupcityMap(divId, url) {
	url = url +'&scale=day';
	$.getJSON(url, function (data) {
		if (data.data.length > 0) {
			var html;
			$.each(data.data,function(i,v){
				html = html+ '<tr map_num="CN-11"> <td>'+ v.key+'</td> <td>'+v.value+'</td> </tr>';
			});
			$('#'+divId).html(html);
		}else {
			$('#'+divId).html('no data');
		}
	}).retry({times:3});
}

function updateOdrtLineChart(divId, url) {
	url = url +'&scale=day';
	$.getJSON(url, function (data) {
		var times  = [];
		var values = [];
		var total = 0;
		if (data.data.length > 0) {
			var i;
			for (i = 0; i < data.data.length; i++) {
				values.push(data.data[i].value);
				times.push(data.data[i].time);
				total += data.data[i].value;
			}
		}else {
			$('#'+divId).html('no data');
		}

		var chart = createLineChart({
			divId: divId,
			title: '',
			isHourView: false,
			xitems: times,
			yitems: values,
			xTitle: '',
			yTitle: ''
		});
		chart.setOption({
			option: {
				title: {
					show: false
				}
			}
		});
	}).retry({times:3});

}
function updateLineChart(divId, url) {
    url = url +'&scale=day';
    $.getJSON(url, function (data) {
        var values = [];
        var total = 0;
        if (data.data.length > 0) {
            var i;
            for (i = 0; i < data.data.length; i++) {
                values.push(data.data[i].value);
                total += data.data[i].value;
            }
        }
        if (divId == 'newuser') {
            $('#dnu-total').text(total);
        }
        else {
            $('#dau-total').text(total);
        }

        var chart = createLineChart({
            divId: divId,
            title: '',
            isHourView: false,
            xitems: data.time,
            yitems: values,
            xTitle: '',
            yTitle: ''
        });
        chart.setOption({
            option: {
                title: {
                    show: false
                }
            }
        });
    });
}

function updatePieChart(divId, url) {
	$.getJSON(url, function (rpt) {
		var names = [];
		var items = [];
		var i;
		if (rpt.sessions.data.length > 0) {
			for (i = 0; i < rpt.sessions.data.length; i++) {
				var d = rpt.sessions.data[i];
				names.push(d.key);
				items.push({
					"name": d.key,
					"value": d.value
				});
			}
		}
		var chart = createPieChart({
			divId: divId,
			title: '',
			names: names,
			values: items
		});
		chart.hideloading();
		chart.setOption({
            option: {
                title: {
                    show: false
                }
            }
        });
	}).retry({times:3});
}
function updateCount(divId, url) {
	$.getJSON(url, function (rpt)    {
		if (divId == 'RevenueCount' || divId == 'costCount') {
			$('#'+divId).text('$'+formatMoney(rpt.count));
		} else {
			$('#'+divId).text(rpt.count);
		}

	}).retry({times:3});
}

function updateStackedBarChart(divId, data, title) {
    var chart = createStackedBarChart({
        divId: divId,
        data: data,
        title: title
    });
}

function updateDoHistogram(divId, url) {
	$.getJSON(url, function (rpt) {
		if (rpt.times == null || rpt.times == '') {
			$('#'+divId).html('no data');
			return false;
		}
		var times = [];
		var names = [];
		var series = [];
		var i;
		for(var k in rpt.data) {
			names.push(k);
		}
		times = rpt.times;
		series =  rpt.data;
		lines = rpt.line;
		var chart = createDoHistogram({
			divId: divId,
			title: '',
			names: names,
			times:times,
			series: series,
			lines:lines
		});
		chart.hideloading();
		chart.setOption({
			option: {
				title: {
					show: false
				}
			}
		});
	}).retry({times:3});
}
function updateNupcPieChart(divId, url) {
	$.getJSON(url, function (rpt) {
		var names = [];
		var items = [];
		var i;
		if (rpt.data.length > 0) {
			for (i = 0; i < rpt.data.length; i++) {
				var d = rpt.data[i];
				names.push(d.key);
				items.push({
					"name": d.key,
					"value": d.value
				});
			}
		}
		var chart = createPieChart({
			divId: divId,
			title: '',
			names: names,
			values: items
		});
		chart.hideloading();
		chart.setOption({
			option: {
				title: {
					show: false
				}
			}
		});
	}).retry({times:3});
}*/


</script>
